<template>
  <cjui-page-panel header="基础柱状图2">
    <template #intro>
      添加了一些常见元素的样式效果。
    </template>
    
    <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-full" />
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const chartOption = {
  legend: {
    show: true,
  },
  grid: {
    top: 30,
    right: 10,
    bottom: 30,
  },
  xAxis: {
    data: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
  },
  yAxis: [
    {
      name: '数量',
      nameTextStyle: {
        padding: [0, 0, 0, -10]
      }
    },
    {
      name: '百分比',
      axisLabel: {
        align: 'right',
        margin: 0,
        padding: [0, -35, 0, 0],
        formatter: '{value}%'
      }
    },
  ],
  tooltip: {},
  series: [
    {
      name: '柱1',
      data: [12, 32, 34, 45, 42, 22, 12],
      type: 'bar',
      barWidth: 20,
      label: {
        show: true,
        position: 'top'
      }
    },
    {
      name: '柱2',
      data: [22, 12, 44, 25, 12, 32, 42],
      type: 'bar',
      barWidth: 20,
      label: {
        show: true,
        position: 'top'
      }
    },
    {
      name: '柱3',
      data: [32, 22, 24, 35, 22, 42, 12],
      type: 'line',
      yAxisIndex: 1,
      barWidth: 20,
    }
  ]
}
</script>
